<template>
	<view class="page">
		<!-- 头部筛选 -->
		<view class="filter-tabs">
			<view 
				v-for="(tab, index) in statusOptions" 
				:key="index" 
				class="tab-item" 
				:class="{'active': activeStatus === tab.value}"
				@click="switchStatus(tab.value)"
			>
				<text>{{ tab.label }}</text>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view 
			scroll-y 
			class="order-list-scroll"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="refresh"
		>
			<view v-if="orderList.length > 0" class="order-list">
				<view 
					v-for="(order, index) in orderList" 
					:key="order.id" 
					class="order-item"
					@click="goToOrderDetail(order.id)"
				>
					<!-- 订单头部 -->
					<view class="order-header">
						<view class="shop-info">
							<image src="/static/icons/shop.svg" class="shop-icon"></image>
							<text class="shop-name">{{ order.shopName }}</text>
						</view>
						<view class="order-status" :class="'status-' + order.status">
							<text>{{ getStatusText(order.status) }}</text>
						</view>
					</view>
					
					<!-- 订单商品 -->
					<view class="order-goods">
						<view 
							v-for="(goods, goodsIndex) in order.goods" 
							:key="goodsIndex" 
							class="goods-item"
						>
							<image :src="goods.image" class="goods-image" mode="aspectFill"></image>
							<view class="goods-info">
								<text class="goods-name">{{ goods.name }}</text>
								<view class="goods-price-wrap">
									<text class="goods-price">¥{{ goods.price }}</text>
									<text class="goods-quantity">x{{ goods.quantity }}</text>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 订单底部 -->
					<view class="order-footer">
						<view class="order-total">
							<text>共{{ getGoodsCount(order.goods) }}件商品</text>
							<text>合计：<text class="total-price">¥{{ order.totalAmount }}</text></text>
						</view>
						
						<!-- 订单操作按钮 -->
						<view class="order-actions">
							<button 
								v-if="order.status === 1" 
								class="action-btn primary"
								@click.stop="payOrder(order.id)"
							>立即付款</button>
							<button 
								v-if="order.status === 3" 
								class="action-btn"
								@click.stop="viewLogistics(order.id)"
							>查看物流</button>
							<button 
								v-if="order.status === 4" 
								class="action-btn primary"
								@click.stop="confirmReceipt(order.id)"
							>确认收货</button>
							<button 
								v-if="order.status === 5" 
								class="action-btn"
								@click.stop="goToEvaluate(order.id)"
							>去评价</button>
							<button 
								v-if="[1, 2, 3, 4, 5].includes(order.status)" 
								class="action-btn"
								@click.stop="contactService(order.id)"
							>联系客服</button>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else-if="!isLoading" class="empty-state">
				<image src="/static/icons/empty-order.svg" class="empty-icon"></image>
				<text class="empty-text">暂无订单</text>
				<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="orderList.length > 0">
				<text v-if="loadingStatus === 'loading'">加载中...</text>
				<text v-else-if="loadingStatus === 'noMore'">没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { usePage } from '/common/page'
import { post } from '/common/api'

// 订单状态选项
const statusOptions = [
	{ label: '全部', value: 0 },
	{ label: '待付款', value: 1 },
	{ label: '待分享', value: 2 },
	{ label: '待发货', value: 3 },
	{ label: '待收货', value: 4 },
	{ label: '待评价', value: 5 }
]

// 当前选中的订单状态
const activeStatus = ref(0)
const isRefreshing = ref(false)
const isLoading = ref(true)

// 获取页面参数
const pages = getCurrentPages()
const page = pages[pages.length - 1]
const options = page.$page?.options || {}

// 如果URL中有状态参数，则设置为当前状态
if (options.status) {
	activeStatus.value = Number(options.status)
}

// 搜索参数
const searchObject = ref({
	no: 1,
	size: 10,
	sortField: "createTime",
	sortMethod: "desc",
	status: activeStatus.value
})

// 使用分页钩子
const {
	pageData,
	status: loadingStatus,
	totalPage,
	initData,
	total,
	loadMore
} = usePage("/order/search", searchObject)

// 订单列表
const orderList = computed(() => {
	return pageData.value || []
})

// 切换订单状态
const switchStatus = (status) => {
	activeStatus.value = status
	searchObject.value.status = status
	initData()
}

// 刷新列表
const refresh = async () => {
	isRefreshing.value = true
	await initData()
	isRefreshing.value = false
}

// 获取订单状态文字
const getStatusText = (status) => {
	const statusMap = {
		1: '待付款',
		2: '待分享',
		3: '待发货',
		4: '待收货',
		5: '待评价',
		6: '已完成',
		7: '已取消'
	}
	return statusMap[status] || '未知状态'
}

// 获取商品总数
const getGoodsCount = (goods) => {
	return goods.reduce((total, item) => total + item.quantity, 0)
}

// 跳转到订单详情
const goToOrderDetail = (orderId) => {
	uni.navigateTo({
		url: `/pages/order/detail?id=${orderId}`
	})
}

// 立即付款
const payOrder = (orderId) => {
	uni.navigateTo({
		url: `/pages/payment/index?orderId=${orderId}`
	})
}

// 查看物流
const viewLogistics = (orderId) => {
	uni.navigateTo({
		url: `/pages/order/logistics?id=${orderId}`
	})
}

// 确认收货
const confirmReceipt = (orderId) => {
	uni.showModal({
		title: '确认收货',
		content: '确认已收到商品吗？',
		success: async (res) => {
			if (res.confirm) {
				// 调用确认收货接口
				const result = await post('/order/confirm', { id: orderId })
				if (result.code === 200) {
					uni.showToast({
						title: '确认收货成功',
						icon: 'success'
					})
					// 刷新列表
					refresh()
				} else {
					uni.showToast({
						title: result.msg || '操作失败',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 去评价
const goToEvaluate = (orderId) => {
	uni.navigateTo({
		url: `/pages/order/evaluate?id=${orderId}`
	})
}

// 联系客服
const contactService = (orderId) => {
	// 这里可以根据实际需求实现，比如拨打电话或者跳转到客服页面
	uni.makePhoneCall({
		phoneNumber: '400-123-4567'
	})
}

// 去购物
const goShopping = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

// 页面加载完成
onMounted(() => {
	initData()
	setTimeout(() => {
		isLoading.value = false
	}, 500)
})
</script>

<style lang="scss" scoped>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.filter-tabs {
	display: flex;
	background-color: #fff;
	padding: 0 20rpx;
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		position: relative;
		
		&.active {
			color: #ff6b81;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background-color: #ff6b81;
				border-radius: 2rpx;
			}
		}
	}
}

.order-list-scroll {
	height: calc(100vh - 80rpx);
}

.order-list {
	padding: 20rpx;
}

.order-item {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-header {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #f5f5f5;
	
	.shop-info {
		display: flex;
		align-items: center;
		
		.shop-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		
		.shop-name {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.order-status {
		font-size: 26rpx;
		
		&.status-1 {
			color: #ff6b81;
		}
		
		&.status-2 {
			color: #ff9800;
		}
		
		&.status-3, &.status-4 {
			color: #2196f3;
		}
		
		&.status-5 {
			color: #4caf50;
		}
		
		&.status-6 {
			color: #9e9e9e;
		}
		
		&.status-7 {
			color: #9e9e9e;
		}
	}
}

.order-goods {
	padding: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.goods-item {
	display: flex;
	padding: 10rpx 0;
	
	&:not(:last-child) {
		margin-bottom: 10rpx;
	}
	
	.goods-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
	}
	
	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.goods-name {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.goods-price-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.goods-price {
				font-size: 28rpx;
				color: #ff6b81;
				font-weight: bold;
			}
			
			.goods-quantity {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
}

.order-footer {
	padding: 20rpx;
	
	.order-total {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #666;
		
		text {
			margin-left: 20rpx;
		}
		
		.total-price {
			color: #ff6b81;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	
	.order-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: wrap;
		
		.action-btn {
			min-width: 160rpx;
			height: 60rpx;
			padding: 0 20rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			margin-left: 20rpx;
			background-color: #fff;
			color: #666;
			border: 1rpx solid #ddd;
			border-radius: 30rpx;
			
			&.primary {
				background-color: #ff6b81;
				color: #fff;
				border-color: #ff6b81;
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 30rpx;
		color: #999;
		margin-bottom: 40rpx;
	}
	
	.go-shopping-btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ff6b81;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
	font-size: 26rpx;
	color: #999;
}
</style>
